<template>
	<div>
		<div class="header">
			<div class="searchdiv">
				<!--搜索框-->
				<nut-searchbar @focus="toSearch" v-model="val" placeText="内容" :hasIcon="true" :hasTextButton="true" customClass="search_demo" :hasSearchButton="false"></nut-searchbar>
			</div>
			<div class="logdiv">
				<!--登录按钮-->
				<nut-button @click="toLogin()" v-if="$cookies.get('token') == null || $cookies.get('token') == 'undefined'">登录</nut-button>
				<nut-button @click="toMe()" v-else>
					<nut-avatar size="large" bg-icon :bg-image="$cookies.get('avatar')"></nut-avatar>
				</nut-button>
			</div>
		</div>
		<div class="headerBe"></div>
		<!--轮播图-->
		<div class="swiper">
			<nut-swiper style="border-radius: 13px" direction="horizontal" :loop="true" :canDragging="false" :paginationVisible="true" ref="demo3" :autoPlay="3000">
				<div class="nut-swiper-slide gray">
					<span><img src="../assets/1.jpg"/></span>
				</div>
				<div class="nut-swiper-slide gray">
					<span><img src="../assets/4.jpg"/></span>
				</div>
				<div class="nut-swiper-slide gray">
					<span><img src="../assets/7.jpg"/></span>
				</div>
				<div class="nut-swiper-slide gray">
					<span><img src="../assets/2.png"/></span>
				</div>
			</nut-swiper>
		</div>
		<!--分类标签-->
		<nut-tabbar @tab-switch="tabSwitch1" type="card" :tabbar-list="tabList1" :wrapper-height="1000"></nut-tabbar>

		<div class="activity" @click="toActive">
			<div class="activity1">
				<p>限时抢购</p>
				<p>{{nowDate}}</p>
			</div>
			<div class="activity2">
				<nut-swiper
						:paginationVisible="true"
						direction="horizontal"
						:swiperData="dataItem"
						:loop="true"
						ref="demo1"
				>
					<div  v-for="(item,index) in dataItem" :key="index"  class="nut-swiper-slide">
						<span><img :src="item" width="100%"/></span>
					</div>
				</nut-swiper>
			</div>
		</div>
		<!--标签展开，推荐-->
		<div class="cards">
			<goods-card></goods-card>
		</div>
	</div>
</template>

<script>
    import GoodsCard from "../components/goodsCard.vue";
    export default {
        name: "index",
        components: {GoodsCard},
        data() {
            return {
                tabList1: [
                    {
                        'tabTitle': '家居百货',
                        'curr': true,
                        'icon': 'http://img13.360buyimg.com/uba/jfs/t30331/209/562746340/2190/6619973d/5bf763aaN6ff02099.jpg',
                        'activeIcon': 'http://img20.360buyimg.com/uba/jfs/t28675/125/569589124/2710/fe1b0e7c/5bf79218Nbc49fc24.jpg'
                    },
                    {
                        'tabTitle': '服饰',
                        'curr': false,
                        'icon': 'http://img13.360buyimg.com/uba/jfs/t27280/289/2061314663/2392/872e32ff/5bf76318Ndc80c1d8.jpg',
                        'activeIcon': 'http://img14.360buyimg.com/uba/jfs/t28468/128/565494642/3313/ce508dd6/5bf79214Nab2a3076.jpg'
                    },
                    {
                        'tabTitle': '休闲零食',
                        'curr': false,
                        'icon': '../assets/3.png',
                        'activeIcon': 'http://img11.360buyimg.com/uba/jfs/t27370/260/2117900302/3274/bd097e85/5bf7921bNafc526e2.jpg'
                    }
                ],
				/*positionNavCurr: 'top',*/
                goodstableTabs: [],
                val: '',
				timer:'',
				nowDate: '',
				dataItem:['https://img11.360buyimg.com/da/s590x470_jfs/t1/139209/6/14302/78318/5fafa153Ee652d45f/a9559e556d813a1c.jpg.webp',
					'https://img13.360buyimg.com/da/s590x470_jfs/t1/147450/37/10877/67683/5f869404E46113b46/35b73c15da33bac6.jpg.webp',
					'https://img30.360buyimg.com/pop/s590x470_jfs/t1/155825/5/1614/94715/5fe2a903E93f485f3/00fe98e240e57bc2.jpg.webp',
					'https://imgcps.jd.com/ling4/2922989/5bCd5ZOB6LSo5aW96Iy2/5aSa5Lmw5LyY5oOgMuS7tjnmipjotbc/p-5bd8253082acdd181d02fa1f/32ca7e7b/cr/s/q.jpg']
            };
        },
        methods: {
            tabSwitch1: function (value, index) {

            },
            tabSwitch: function (index, event) {

            },
			toSearch:function ()
			{
				this.$router.push({name:'search'})
			},
			toLogin(){
            	this.$router.push({name:'Login'})
			},
			toMe(){
				this.$router.push({path:'/me'})
			},
			toActive(){
            	this.$router.push('/active')
			},

        },
		created() {
        	var _this = this;
        	this.timer = setInterval(function () {
        		_this.nowDate = new Date().getHours() + ":" + new Date().getMinutes() + ":" + new Date().getSeconds();
			},100)//实时刷新
		},
		beforeDestroy() {
        	if(this.timer){
        		clearInterval(this.timer);//离开清空
			}
		},
		destroyed() {
			clearTimeout(this.times);
		}
	}
</script>

<style scoped>
	* {
		margin: 0px;
		padding: 0px;
	}

	.header {
		background: #c82519;
		text-align: center;
		z-index: 100;
	}

	.headerBe {
		background-image: -webkit-gradient(linear, left bottom, left top, from(#f1503b), color-stop(50%, #c82519));
		background-image: -webkit-linear-gradient(bottom, #f1503b, #c82519 50%);
		background-image: linear-gradient(0deg, #f1503b, #c82519 50%);
		position: fixed;
		top: 0;
		left: -25%;
		height: 9rem;
		width: 150%;
		border-bottom-left-radius: 100%;
		border-bottom-right-radius: 100%;
		z-index: -200;
	}

	.searchdiv {
		display: inline-block;
		width: 280px;
		padding: 10px 0px 0px 0px;
		box-sizing: border-box;
	}

	.gray {
		width: auto;
	}

	.swiper {
		padding: 12px;
	}

	.logdiv {
		display: inline-block;
		vertical-align: middle;
		width: 50px;
		padding: 0px;
	}

	>>> .nut-tab {
		background: none;
		padding: 0px;
	}

	>>> .nut-button {
		display:inline-block;
		vertical-align: middle;
		background: none;
		padding: 0px;
		border: none;
		color: #ffffff;
		font-size: 18px;
		outline: none;
	}
	.activity{
		display: flex;
		flex-wrap: nowrap;
		flex-direction: row;
		margin-top:10px;
	}
	.activity1{
		background: url("../assets/act.png") no-repeat center;
		width:132px;
		height: 150px;
		margin-left:1px;
	}
	.activity1>p{
		width:100%;
		line-height: 75px;
		text-align: center;
		color:#ffffff;
	}
	.activity2{
		width:70vw;
		height:150px;
		margin:0px;
		padding:0px;
		box-sizing:border-box;
		overflow:hidden;
	}
	.cards{
		background: rgba(255,255,255,1);
		margin-bottom: 60px;
	}
</style>
